<template>
  <!-------------------------------------------------首页展示------------------------------------------------>
  <div class="home">
    <div class="home-head">
      <div class="home-head-user">
        <p>通用管理系统.运营平台</p>
        <p>--------------------------------------------</p>
        <p>成都市</p>
        <p>{{ userInfo.nickName }} , {{ getTime() }}好</p>
        <p>登录IP ：{{ userInfo.lastLoginIp }}</p>
        <p>登录日期 ：{{ userInfo.lastLoginTime }}</p>
        <p>登录系统 ：{{ userInfo.lastLoginOs }}</p>
      </div>
    </div>
    <!-- /merchant/reconciliation -->
    <!--待审核商户-->
    <!--    <div class="home-table">-->
    <!--      <p></p>-->
    <!--      <p> 待审核商户 </p>-->
    <!-- <el-table :data="tableData" style="width: 100%" size="small">
      <el-table-column label="创建日期" prop="createTime" align="center"> </el-table-column>
      <el-table-column label="审核信息描述" prop="remark" align="center"> </el-table-column>
      </el-table>-->
    <!--    </div>-->
  </div>
</template>

<script>
import CustomUpload from '@/components/uploadphoto/custom-upload.vue';
import { useSystemInfo } from '@/store/pinia-store';
import {  mapWritableState } from 'pinia'
export default {
  name: "home",
  computed: mapWritableState(useSystemInfo, ['userInfo']),
  data() {
    return {
      tableData: [
        { createTime: "2021-04-12 02:33:22", remark: "商户名字（商户编号）待审核" },
        { createTime: "2021-04-12 02:33:22", remark: "商户名字（商户编号）待审核" },
        { createTime: "2021-04-12 02:33:22", remark: "商户名字（商户编号）待审核" },
        { createTime: "2021-04-12 02:33:22", remark: "商户名字（商户编号）待审核" },
        { createTime: "2021-04-12 02:33:22", remark: "商户名字（商户编号）待审核" },
        { createTime: "2021-04-12 02:33:22", remark: "商户名字（商户编号）待审核" },
      ],
      currentTime: "早上",
    };
  },
  methods: {

    getTime() {
      let now = new Date();
      let times = parseInt(now.getHours());
      if (times >= 0 && times < 6) {
        return "凌晨";
      }
      if (times >= 6 && times < 9) {
        return "早上";
      }
      if (times >= 9 && times < 11) {
        return "上午";
      }
      if (times >= 11 && times < 13) {
        return "中午";
      }
      if (times >= 13 && times < 17) {
        return "下午";
      }
      if (times >= 17 && times < 19) {
        return "傍晚";
      }
      if (times >= 19 && times < 24) {
        return "晚上";
      }
    }
  },
  components: { CustomUpload }
}
</script>

<style scoped lang="less">
.home {
  .home-head {
    width: 100%;
    height: 700px;
    background-image: url("@/assets/img/homeBackground.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 70%;

    .home-head-user {
      float: right;
      color: white;
      margin-top: 100px;
      margin-right: 20%;

      p:first-child {
        font-weight: bold;
        font-size: 24px;
      }
    }
  }

  .home-table {
    margin-top: 20px;

    p {
      line-height: 20px;
      height: 20px;
      float: left;
    }

    p:first-child {
      width: 5px;
      height: 18px;
      margin-left: 40px;
      margin-right: 10px;
      background-color: #08aac6;
    }
  }
}
</style>
